import { FC } from 'react'
import { UploadFile } from './upload'
import Icon from '../Icon'
import Progress from '../Progress'
interface UploadListProps {
  fileList: UploadFile[]
  onRemove: (_file: UploadFile) => void
}

export const UploadList: FC<UploadListProps> = (props) => {
  const { fileList, onRemove } = props
  return (
    <ul className="dog-upload-list">
      {fileList.map((item) => {
        const { status, name, uid, percent } = item
        return (
          <li className="dog-upload-list-item" key={uid}>
            <span className={`file-name file-name-${status}`}>
              <Icon icon="file-alt" theme="secondary" />
              {name}
            </span>
            <span className="file-status">
              {status === 'uploading' || status === 'ready' ? ( // 上传中或者准备上传
                <Icon icon="spinner" spin theme="primary" />
              ) : null}
              {status === 'success' && <Icon icon="check-circle" theme="success" />}
              {status === 'error' && <Icon icon="times-circle" theme="danger" />}
            </span>
            <span className="file-actions">
              <Icon icon="times" onClick={() => onRemove(item)} />
            </span>
            {status === 'uploading' && ( // 上传中进度显示
              <Progress percent={percent || 0} />
            )}
          </li>
        )
      })}
    </ul>
  )
}

export default UploadList
